<template>
  <div class="cluePoolWrap">
    <!-- 顶部box -->
    <div class="titleBox">
      <!-- 左标题 -->
      <div class="title">
        <span>线索池管理</span>
        <!-- 抽屉弹出 -->
        <!-- <i class="el-icon-question title-icon"></i> -->
      </div>

      <!-- 右侧省略号 -->
      <div>
        <el-dropdown class="topDrop" trigger="click">
          <el-button icon="el-icon-more" class="dropdown-btn" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-import">导入</el-dropdown-item>
            <el-dropdown-item icon="el-import">导出</el-dropdown-item>
            <el-dropdown-item icon="el-import">线索池规则</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="shadowShell" style="background-color: #FFFFFF;margin-top: 25px;">
      <!-- 搜索框Box -->
      <div class="searchBox" style="padding:0 20px;">
        <!-- <div class="searchBox-Left"> -->
        <el-input v-model="searchValue" class="search-input" placeholder="线索名称/手机/电话" suffix-icon="el-icon-search"
          size="small"></el-input>
        <!-- 默认线索池选择器 -->
        <el-select v-model="value" placeholder="请选择" class="clueSelector">
          <el-option style="height: 30px !important;" v-for="item in options" :key="item.id" :value="item.value"
            :id="item.id">
          </el-option>
        </el-select>
        <!-- </div> -->
        <!-- <div class="searchBox-Right"> -->
        <!-- <div>
          <el-button style="border: none;"><i class="rp rp-screening"></i> 高级筛选</el-button>
        </div> -->
        <div>
          <table-header-filters :selection-list="tableSelectionList" :condition-type-fun="undefined"
            :fields="getFilterFields" :props="tableHeaderProps.props"
            :filter-header-props="tableHeaderProps.filterHeaderProps"
            :filter-form-props="tableHeaderProps.filterFormProps" @changeState="changeFlagState"
            @operations-click="tableOperationsClick" @event-change="tableHeaderHandle" @filter-change="handleFilter" />
        </div>

        <!-- </div> -->
      </div>

      <!-- 引入表格 -->
      <div style="padding: 20px;padding-top: 0;">
        <clueTable ref="clueTable" @selection-change="getRow" @showDrawer="showDrawerFun" @pagination="pagination"
          :headData="headData" :tableData="tableData" :total="total" @star="starClue" :loadding="loadding" />
      </div>
    </div>
    <!-- 引入弹框 -->
    <cluePoolDrawer ref="cluePoolDrawer" />
  </div>
</template>

<script>
import TableMixin from '@/components/FieldFilters/tableMixin'
import clueTable from '@/components/clueManage/clues/clueTable'
import TableHeaderFilters from '@/components/FieldFilters/TableHeaderFilters'
import cluePoolDrawer from '@/components/clueManage/cluePoolDrawer/index.vue'
import clueInfoDrawer from '@/components/clueManage/clueInfoDrawer/index'
export default {
  name: 'cluePool',
  mixins: [TableMixin],
  components: {
    clueTable, TableHeaderFilters, cluePoolDrawer, clueInfoDrawer
  },
  data() {
    return {
      // 默认线索池
      options: [{
        id: 1,
        value: '系统默认线索池'
      }],
      // 默认值，动态绑定
      value: '系统默认线索池',
      id: 1,
      loadding:true
    }
  },
  methods: {
    // 显示抽屉
    showDrawerFun(val) {
      this.$refs.cluePoolDrawer.show();
      console.log('333')
    },
  }

}
</script>
<style lang="scss">
@import "@/assets/styles/pageStyle.scss";

.shadowShell{
  height: calc(100vh - 160px);
  background-color: #ffffff;
  overflow-y: auto;
}
// 控制组件样式
.clueSelector {
  margin-left: 12px;

  .el-input__inner {
    border: none;
    background: #F4F5F7;
    height: 32px !important;
    line-height: 32px !important;
  }
}

.topDrop .el-button--medium {
  border: none;
  background: #F4F5F7;
}
</style>
<style lang="scss" scoped>
.cluePoolWrap {
  padding: 24px 40px 0 40px;

  // 顶部标题
  .titleBox {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji' !important;
    font-weight: 500;
    color: #172b4d;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;

    .title {
      font-size: 24px;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 24px;
      }

      .title-icon {
        color: #42526e;
        cursor: pointer;
        margin-left: 4px;
        font-size: 16px;
      }
    }

  }

  // 搜索框Box
  .searchBox {
    margin-top: 30px;
    margin-bottom: 20px;

    // display: flex;
    // justify-content: space-between;
    .search-input {
      width: 220px;
    }

    .searchBox-Right {
      .el-button:hover {
        background-color: #F4F5F7;
        color: #333333;
      }
    }
  }
}
</style>